﻿<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link href="{{asset('admin/static/h-ui/css/H-ui.min.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('admin/static/h-ui.admin/css/H-ui.login.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('admin/static/h-ui.admin/css/style.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('admin/lib/Hui-iconfont/1.0.8/iconfont.css')}}" rel="stylesheet" type="text/css"/>
    <style>
        span{
            position: absolute;
            color: red;
            opacity: 0;
        }
        .sp{
            position: absolute;
            left: 18px;
            top:22px;
            font-size: 16px;
            color: mediumvioletred;
            line-height: 26px;
        }
        .d{
            padding-top:40px;
        }
        .msg{
            position: absolute;
            top:40px;
            right: 60px;
            color: red;
        }
    </style>
    <!--[if IE 6]>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <link rel="shortcut icon" type="image/x-icon" href="admin/favicon-10.ico" />
    <title>注册</title>
    <meta name="_token" content="{{ csrf_token() }}"/>
    <meta name="keywords" content="H-ui.admin 3.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
    <meta name="description" content="H-ui.admin 3.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<div class="loginWraper">
    <div id="loginform" class="loginBox d">
        <form class="form form-horizontal" action="register" method="post" id="form1">
            <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
            @if(Session::has('err1'))
                <div class=" sp">
                    {{Session::get('err1')}}&nbsp;<i class="Hui-iconfont">&#xe706;</i>
                </div>
            @endif
            <div class="row cl">
                <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe67b;</i></label>
                <div class="formControls col-xs-8">
                    <input id="email" required="required" name="email" type="email" placeholder="账户" class="input-text size-L" value="@if(Session::has('v1')){{Session::get('v1')}}@endif"><div class="msg"></div>
                    <br><span id="inp1_err" >请输入正确的邮箱</span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60d;</i></label>
                <div class="formControls col-xs-8">
                    <input id="username" name="username" type="text" placeholder="昵称" class="input-text size-L" value="@if(Session::has('v2')){{Session::get('v2')}}@endif">
                    <br><span id="inp2_err" >请输入合适的昵称</span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60e;</i></label>
                <div class="formControls col-xs-8">
                    <input id="password" required="required" name="password" type="password" placeholder="密码" class="input-text size-L" value="@if(Session::has('v3')){{Session::get('v3')}}@endif">
                    <br><span id="inp3_err" >密码是由数字和英文组成的6-10位数字</span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-3"></label>
            </div>
            <div class="row cl">
                <div class="formControls col-xs-8 col-xs-offset-3">
                    <a id="but" class="btn btn-success radius size-L">
                        &nbsp;注&nbsp;&nbsp;&nbsp;&nbsp;册&nbsp;</a>
                    <input name="" type="reset" class="btn btn-default radius size-L"
                           value="&nbsp;取&nbsp;&nbsp;&nbsp;&nbsp;消&nbsp;">
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="{{asset('admin/lib/jquery/1.9.1/jquery.min.js')}}"></script>
<script type="text/javascript" src="{{asset('admin/lib/layer/2.4/layer.js')}}"></script>
<script type="text/javascript">
    (function(window){
        function yx(){
            var ipt1 =document.querySelector('#email').value.trim();
            var err1 = document.querySelector('#inp1_err');
            var regex = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            if (regex.test(ipt1)) {
                err1.style.opacity=0;
                return true;
            }
            err1.style.display=1;
            return false;
        }
        function nc(){
            var ipt2 =document.querySelector('#username').value.trim();
            var err2 = document.querySelector('#inp2_err');
            var regex = /^[\w|-|\u4e00-\u9fa5]+$/;
            if (regex.test(ipt2)) {
                err2.style.opacity=0;
                return true;
            }
            err2.style.opacity=1;
            return false;
        }
        function mm(){
            var ipt3 =document.querySelector('#password').value.trim();
            var err3 = document.querySelector('#inp3_err');
            var regex = /^[a-zA-Z0-9]{6,10}$/;
            if (regex.test(ipt3)) {
                err3.style.opacity=0;
                return true;
            }
            err3.style.opacity=1;
            return false;
        };
        function email_check() {
            var ipt2 =document.querySelector('#email').value.trim();
            $.ajax({
                type: 'POST',
                url:'{{url('register/emailCheck')}}',
                data: { email : ipt2},
                Type: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                },
                success: function(respond){
                        $('.msg').html(respond.msg);

                },
                error: function(){
                    alert('Ajax error!')
                }
            });
        }

        document.querySelector('#email').onblur=yx;
        document.querySelector('#username').onblur=nc;
        document.querySelector('#password').onblur=mm;
        document.querySelector('#email').onblur=email_check;

        document.getElementById('but').onclick=function() {
            if (yx()&&nc()&&mm()) {
                document.getElementById('form1').submit();
            }
        }
    }(window));
</script>
</body>
</html>

